﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<!--03.jQuery-->
<script src="Scripts/jquery-1.8.3.js"></script>
<script src="Scripts/jquery.form.min.js"></script>

<body>
    <form id="form2" action="/Home/SaveFile2" method="post" enctype="multipart/form-data">
        <input type="file" class="file1" name="file1" />
        <input type="text" name="userName" value="yy" />
        <input type="text" id="age" value="10" />
        <button type="submit" class="but1">上传1</button>
        <button type="button" class="but2">上传2</button>
    </form>
    <script>
        var options = {
            target: '#output',          //把服务器返回的内容放入id为output的元素中
            beforeSubmit: showRequest,  //提交前的回调函数
            success: showResponse,      //提交后的回调函数
            //url: url,                 //默认是form的action， 如果申明，则会覆盖
            //type: type,               //默认是form的method（get or post），如果申明，则会覆盖
            //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
            //clearForm: true,          //成功提交后，清除所有表单元素的值
            //resetForm: true,          //成功提交后，重置所有表单元素的值
            timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求
        }

        function showRequest(formData, jqForm, options) {
            //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
            //jqForm:   jQuery对象，封装了表单的元素
            //options:  options对象
            console.log(formData);
            formData.push({
                name: "age",
                value: 100
            });
            var queryString = $.param(formData);   //name=1&address=2
            alert(queryString);
            return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
        };

        function showResponse() {

        }

        //方式2（通过ajaxForm绑定ajax操作）
        $(function () {
            $('#form2').ajaxForm({
                success: function (responseText) {
                    alert(responseText);
                }
            });
        });

        //方式3（通过ajaxSubmit直接执行ajax操作）
        $(function () {
            $(".but2").click(function () {
                $('#form2').ajaxSubmit(options);
            });
        });
    </script>
</body>

</html>
